<template>
  <div class="left clearfix container" >
    <div class="article clearfix" v-if="!loading"> 
      <div 
           style="'width': '100%'"
           class="article-left"
           v-if="!isLoadEnd">
        <div class="header">
          <h1 class="title">{{articleDetail.title}}</h1>
          <div class="author">
            <div class="avatar">
              <img class="auth-logo"
                   src="../assets/userLogo.jpeg"
                   alt="BiaoChenXuYing">
            </div>
            <div class="info">
              <span class="name">
                <span>lele</span>
              </span>
              <div props-data-classes="user-follow-button-header"
                   data-author-follow-button="" />
              <div class="meta">
                <span class="publish-time">
                    {{ articleDetail.ctime | formateDate("YMDHMS") }}
                </span>
                <span class="wordage">
                  字数 {{ nums }}
                </span>
              </div>
            </div>
            <div class="tags "
                 title="标签">
              <el-tag size="mini"
                      class="tag"
                      type="success">关于博主</el-tag>   
            </div>
            <span class="clearfix" />
          </div>
        </div>
        <div class="content">
          <div id="content"
               class="article-detail"
               v-html="articleDetail.content">
          </div>
        </div>
      </div>
      <!-- <div v-if="!isMobileOrPc"
           style="width: 23%"
           class="article-right fr anchor"
           v-html="articleDetail.toc"></div>
      <LoadingCustom v-if="isLoading"></LoadingCustom> -->
    </div>
     <Loading v-if="loading"/>
       <LoadEnd :msg="msg"  v-if="isLoadEnd"></LoadEnd>
    </div>
</template>

<script>
import Loading from '../components/loading.vue'
import LoadEnd from '../components/loadEnd.vue'
import axios from 'axios'
export default {
  data () {
    return {
      isLoading:false,
      articleDetail:'',
      content:'',
      loading:true,
      nums:'',
      scanned:'',
      likes:'',
      likeTimes:'',
      userId:'',
      times:0,
      cacheTime:'',
      userNames:'',
      isLoadEnd:false,
      msg:''
    }
  },
  created () {
    let id = this.$route.query.id
     var that = this
    axios.post('api/about')
      .then(data => {
        console.log(data)
        if(data.data.data.length ==0){
          this.msg = '您还没有发表此栏目!'
          this.isLoadEnd =true
          this.loading=false
        }else{
           this.articleDetail = data.data.data[0]
            var count= that.fucCheckLength(that.articleDetail.content)
          this.nums = count
          this.loading=false
        }
        
      })
  },
  components:{
     Loading,
     LoadEnd

  },
  mounted () {
  },
  beforeDestroy() {
    document.title = "lele的博客网站";
    document
      .getElementById("keywords")
     
    document
      .getElementById("description")
      
  },
   watch: {
    '$route' (to, from) { // 监听路由是否变化
      if (to.query.tag_id !== from.query.tag_id) {
         let id =  to.query.tag_id
         let tag_name = to.query.tag_name
         this.tag_id =id
         this.tag_name=tag_name
         axios.post('api/article',{kinds:to.query.tag_id})
              .then(data => {
                console.log(data)
                // this.articlesList = ''
                this.articlesList = data.data
                this.isLoading=false
              })
      }
     
    }
  },
  methods:{
   fucCheckLength(strTemp)  {
   var re = /[\u4E00-\u9FA5]/g;//中文正则
   var reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g;//中文标点正则
    var leng = strTemp.match(re).length;  
    if(strTemp.match(reg)!=null){
	  var	biaodianNum =  strTemp.match(reg).length;
	}
    return leng + biaodianNum;
    } ,
  // 
  }
}
</script>

<style lang='less' scoped>
@import url("../less/index.less");
.anchor {
  display: block;
  position: sticky;
  top: 213px;
  margin-top: 213px;
  border-left: 1px solid #eee;
  .anchor-ul {
    position: relative;
    top: 0;
    max-width: 250px;
    border: none;
    -moz-box-shadow: 0 0px 0px #fff;
    -webkit-box-shadow: 0 0px 0px #fff;
    box-shadow: 0 0px 0px #fff;

    li.active {
      color: #009a61;
    }
  }
  a {
    color: #333;
  }
}
.article {
  width: 100%;
  .header {
    .title {
      margin: 20px 0 0;
      text-align: center;
      font-size: 34px;
      font-weight: bold;
    }
    .author {
      position: relative;
      margin: 30px 0 40px;
      padding-left: 50px;
      .avatar {
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        vertical-align: middle;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .info {
        float: left;
        vertical-align: middle;
        // display: inline-block;
        margin-left: 8px;
        a {
          color: #333;
        }
      }
      .name {
        margin-right: 3px;
        font-size: 16px;
        vertical-align: middle;
      }
      .meta {
        margin-top: 5px;
        font-size: 12px;
        color: #969696;
        span {
          padding-right: 5px;
        }
      }
      .tags {
        float: right;
        padding-top: 15px;
        // padding-right: 20px;
        .tag {
          // padding: 0 10px;
          margin-left: 5px;
          border-right: 2px solid #eee;
        }
      }
    }
  }
  .content {
    min-height: 300px;
  }
}
.hearts {
  height: 60px;
  text-align: center;
  margin: 50px;
}
.loader {
  color: rgb(226, 44, 44);
  text-align: center;
  padding: 50px;
  font-size: 16px;
}
.clearfix {
  clear: both;
}
</style>